<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <button id="addMenu" class="layui-btn layui-btn-sm data-add-btn" lay-event="add">添加一级菜单</button>
        </div>
        <div>
            <table id="munu-table" class="layui-table" lay-filter="munu-table" style="margin: 0px"></table>
        </div>
    </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="addChild">添加子级</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="icon">
    <i class="{{ d.icon }}"></i>
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm data-add-btn" lay-event="add">添加一级菜单</button>
    </div>
</script>

<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
        layui.use(['table', 'treeTable'], function () {
            var $ = layui.jquery;
            var table = layui.table;
            var treeTable = layui.treeTable;

            var parentNodeText = '无';
            var parentNodeId = '0';

            // 渲染表格
            var menutTreeTable = treeTable.render({
                elem: '#munu-table',
                tree: {
                    iconIndex: 1,  // 折叠图标显示在第几列
                    isPidData:false
                },
                cols: [
                    //{type: 'numbers'},
                    {type: 'checkbox'},
                    {field: 'id', title: 'ID'},
                    {field: 'title', title: '菜单名称'},
                    {field: 'code', title: '菜单编号'},
                    {field: 'url', title: '菜单url'},
                    {field: 'icon', title: '菜单图标',templet:'#icon'},
                    {field: 'sequence', title: '序号',width:70},
                    {templet: '#auth-state',align:'center',title: '操作'}
                ],
                reqData: function(data, callback) {
                    // 在这里写ajax请求，通过callback方法回调数据
                    $.get('../../menu/tree', function (data) {
                        callback(data);  // 参数是数组类型
                    });
                }
            });

            function addMenu(){
                var selectData = menutTreeTable.checkStatus();

                var index = layer.open({
                    title: '添加菜单',
                    type: 2,
                    shade: 0.2,
                    shadeClose: true,
                    area: ['500px', '500px'],
                    content: 'menu-add.html',
                    success: function (layero, index) {
                        // 得到iframe页的窗口对象
                        var iframeWindow = $("div.layui-layer-content > iframe", layero)[0].contentWindow;
                        iframeWindow.parentNodeText = parentNodeText;
                        iframeWindow.parentNodeId = parentNodeId;
                        iframeWindow.menuTreeTable = menutTreeTable;
                    }
                });
            }

            $("#addMenu").click(function () {
                parentNodeText = '无';
                parentNodeId = '0';
                addMenu();
            });

            //监听工具条
            treeTable.on('tool(munu-table)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;

                if (layEvent === 'addChild') {
                    parentNodeText = data.title;
                    parentNodeId = data.id;
                    addMenu();
                }else if (layEvent === 'del') {
                    layer.confirm('确定删除数据？', {
                        icon: 0
                    }, function (index) {
                        var id = data.id;
                        $.post('../../menu/remove', {id: id}, function (data) {
                            layer.msg('删除成功');

                            menutTreeTable.reload();
                        }, 'json');

                        layer.close(index);
                    });
                } else if (layEvent === 'edit') {
                    var index = layer.open({
                        title: '修改菜单',
                        type: 2,
                        shade: 0.2,
                        shadeClose: true,
                        area: ['500px', '500px'],
                        content: 'menu-edit.html',
                        success: function (layero, index) {
                            // 得到iframe页的窗口对象
                            var iframeWindow = $("div.layui-layer-content > iframe", layero)[0].contentWindow;

                            iframeWindow.rowData = JSON.stringify(data);
                            iframeWindow.parentNodeText = data.parentTitle;
                            iframeWindow.parentNodeId = data.parentId;
                            iframeWindow.menuTreeTable = menutTreeTable;

                        }
                    });
                }
            });


        });
</script>
</body>
</html>